<template>
  <section v-if="!isEdit" class="f-order-sale-detail w-card">
    <div class="title-box">
      <span class="title-text">佣金规则详情</span>
      <div>
        <el-button type="primary" plain @click="isEdit = true">编辑</el-button>
        <!-- <el-button v-if="formData.status == 1" type="danger" plain @click="settingHandle(1)">下架</el-button>
        <el-button v-else type="success" plain @click="settingHandle(0)">上架</el-button> -->
      </div>
    </div>

    <div class="f-card">
      <p class="f-title">基础信息</p>
      <ul class="f-ul">
        <li>
          <p>规则ID：</p>
          <p>{{formData.strategyId || '--'}}</p>
        </li>
        <li>
          <p>规则名称：</p>
          <p>{{formData.strategyName || '--'}}</p>
        </li>
        <li>
          <p>规则描述：</p>
          <p>{{ formData.description || '--' }}</p>
        </li>
        <li>
          <p>创建时间：</p>
          <p>{{ getDateTime(formData.createTime)[6] || '--'}}</p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">分佣比例</p>
      <ul class="f-ul">
        <li style="width: 25%;">
          <p>总代：</p>
          <p>{{formData.totalAgentRate/100 }}%</p>
        </li>
        <li style="width: 25%;">
          <p>维修店直销：</p>
          <p>{{formData.directSalesRate/100 }}%</p>
        </li>
        <li style="width: 25%;">
          <p>维修店间推：</p>
          <p>{{formData.indirectSalesRate/100 }}%</p>
        </li>
        <li style="width: 25%;">
          <p>个体推广：</p>
          <p>{{formData.individualPromotionRate/100 }}%</p>
        </li>
      </ul>
    </div>
  </section>

  <Income-Edit v-else :isEdit="isEdit" :formData="formData" @setModify="getDetail" @cancelEdit="isEdit = false"></Income-Edit>

  <!-- 确认密码 -->
  <confirm-password ref="confirmPasswordRef" @verification="confirmSuccess" />
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad } from '@/utils/utils'
import api from './api.js'
import IncomeEdit from './add.vue'
import confirmPassword from '@/components/confirmPass.vue'

export default {
  components: { IncomeEdit, confirmPassword },

  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const confirmPasswordRef = ref(null)

    const state = reactive({
      isEdit: false,

      strategyId: route.query.strategyId,
      formData: {},
    })

    onMounted(() => {
      getDetail()
    })

    const getDetail = () => {
      let json = {
        strategyId: state.strategyId
      }
      api.incomeRuleDetail(json).then(res => {
        state.isEdit = false
        state.formData = res.data
      })
    }

    function settingHandle() {
      const title = `套餐${state.formData.status == 1 ? '下架' : '上架'}提示`
      const msg = `您确定要将套餐产${state.formData.status == 1 ? '下架' : '上架'}吗？`
      confirmPasswordRef.value.dialogShow(title, msg)
    }

    function confirmSuccess() {
      let apiName = state.formData.status == 1 ? 'packageUnshelve' : 'packageShelve'
      api[apiName]({ packageId: state.packageId }).then(res => {
        successDeal('操作成功')
      }).catch(err => {
        console.log(err)
      })
    }

    return {
      ...toRefs(state),
      confirmPasswordRef,
      getDateTime,
      settingHandle,
      confirmSuccess,
      getDetail,
    }
  }
}
</script>

<style lang='scss' scoped>
.f-order-sale-detail {
  box-sizing: border-box;
  padding: 20px;

  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-right: 10px;
    .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
      display: flex;
      justify-content: space-between;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        align-items: center;
        width: 50%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 100px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
  }

  .my-table-box {
    .table-handle-box {
      display: flex;
      align-items: center;
      gap: 0 20px;
    }

    .my-table-footer {
      display: flex;
      align-items: center;
      margin-top: 10px;
      flex-wrap: wrap;
      gap: 10px;
    }
  }
}
</style>